<script lang="ts" setup>
import { reactive, watch, ref } from 'vue';

const userInfo = reactive({
    name: 'zhen',
    age: 29
})
const changeUserInfo = () => {
    userInfo.age = 30
}
watch(userInfo, (val, oldVal) => {
    console.log('userInfo的数据发生了变化', val, oldVal)
})
watch(() => userInfo.name, (val, oldVal) => {
    console.log('userInfo.name的数据发生了变化', val, oldVal)
})
watch(() => userInfo.age, (val, oldVal) => {
    console.log('userInfo.age的数据发生了变化', val, oldVal)
})

const userInfoRef = ref({
    name: 'zhen',
    age: 29
})
watch(userInfoRef, (val, oldVal) => {
    console.log('userInfoRef的数据发生了变化', val, oldVal)
}, {
    deep: true
})
const changeUserInfoRef = () => {
    userInfoRef.value.name = 'chen'
}

const message = ref<string>('')
const index = ref<number>(0)
const changeMulti = () => {
    // message.value = 'hello vue3'
    index.value = 3
}
watch([message, index], ([msg, idx], [oldMsg, oldIdx]) => {
    console.log('message的变化', msg, oldMsg)
    console.log('index的变化', idx, oldIdx)
})
</script>
<template>
    <div>
        <h6>watch</h6>
        <div class="watch-box">
            <div>
                userInfo
                <div>name: {{ userInfo.name }}</div>
                <div>age: {{ userInfo.age }}</div>
            </div>
            <a-button @click="changeUserInfo">改变UserInfo</a-button>
        </div>
        <div class="watch-box">
            <div>
                userInfoRef
                <div>name: {{ userInfoRef.name }}</div>
                <div>age: {{ userInfoRef.age }}</div>
            </div>
            <a-button @click="changeUserInfoRef">改变UserInfoRef</a-button>
        </div>
        <div class="watch-box">
            <div>
                批量侦听
                <div>message: {{ message }}</div>
                <div>index: {{ index }}</div>
            </div>
            <a-button @click="changeMulti">批量侦听</a-button>
        </div>
    </div>
</template>
<style>
.watch-box {
    padding: 20px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}
</style>